<template>
  <!-- 配置菜单页面 -->
  <Dropdown v-model:visible="visible" :trigger="['click']" placement="bottomRight">
    <template #overlay>
      <Menu style="width: 570px; padding: 0" class="function-menu">
        <template v-for="item in MenuConfig" :key="item.key">
          <!-- <Divider v-if="item === '-'" /> -->
          <div :style="`background: ${item.background}`" class="title">{{ item.text }}</div>
          <div class="child-container">
            <MenuItem
              v-for="item_ in item.children"
              :key="item_.key"
              style="width: 25%; display: inline-block"
              @click="clickMenu(item_)"
            >
              <i :class="item_.icon" :style="`color: ${item_.color};margin-right: 5px`"></i
              >{{ item_.text }}
              <i v-if="item_.complete" class="fas fa-flower" style="color: rgb(235, 235, 235)"></i>
            </MenuItem>
          </div>
        </template>
        <div style="display: flex; justify-content: center; padding-bottom: 20px; padding-top: 5px">
          <Button style="width: 200px; background: #e7effc; border: 0" @click="clickReflesh"
            ><i class="jeicon jeicon-refresh"></i>刷新</Button
          >
        </div>
      </Menu>
    </template>
    <Button style="float: right; margin-right: 10px"> 开发选项 </Button>
  </Dropdown>
</template>
<script>
  import { Dropdown, Menu, Button, Modal } from '@jecloud/ui';
  import { defineComponent, ref } from 'vue';
  import { MenuConfig } from './hooks/menu-config';
  import { useFuncConfig } from '@/hooks/use-func-config';
  import { GetFuncRefresh } from '@/api/index';
  export default defineComponent({
    name: 'FuncConfigMenu',
    components: {
      Dropdown,
      Menu,
      MenuItem: Menu.Item,
      // Divider: Menu.Divider,
      Button,
    },
    props: {
      funcId: String,
      funcType: String,
      funcCode: String,
    },
    setup(props) {
      const { showFuncConfig } = useFuncConfig();
      const visible = ref(false);
      const clickMenu = ({ key, activeKey }) => {
        visible.value = false;
        if (['FUNC', 'TREE', 'VIEW'].includes(props.funcType)) {
          showFuncConfig({ key, funcId: props.funcId, activeKey });
        } else {
          Modal.alert('请选择功能！', 'info');
          return false;
        }
      };
      const clickReflesh = () => {
        visible.value = false;
        if (['FUNC', 'TREE', 'VIEW'].includes(props.funcType)) {
          const params = {
            tableCode: 'JE_CORE_FUNCINFO',
            FUNCINFO_FUNCCODE: props.funcCode,
            refresh: true,
            perm: 0,
          };

          GetFuncRefresh(params)
            .then(() => {
              Modal.message('刷新成功', 'success');
            })
            .catch((err) => {
              Modal.alert(err.message, 'error');
              console.log('error', err);
            });
        } else {
          Modal.alert('请选择功能！', 'info');
          return false;
        }
      };
      return { MenuConfig, clickMenu, clickReflesh, visible };
    },
  });
</script>
<style lang="less" scoped>
  .function-menu {
    width: 620px;
    .title {
      width: 100%;
      height: 40px;
      line-height: 40px;
      padding-left: 40px;
      font-weight: Bold;
      color: #333333;
    }
    .child-container {
      padding: 10px 20px;
      .ant-dropdown-menu-item-icon {
        font-size: 14px !important;
      }
    }
  }
</style>
<style lang="less">
  .function-menu {
    .ant-dropdown-menu-item-icon {
      font-size: 14px !important;
    }
  }
</style>
